<template>
  <div class="logon_container">
      <div class="login_mark">
          <i></i>
          <h1></h1>
      </div><!--login_mark ed-->
      <div class="login_content">
          <p><input type="tel" @keyup.enter = "onEnter" v-model = "input_name" placeholder="输入手机号码"></p>
          <p class="clearfix"><input text="password" @keyup.enter = "input_password" placeholder="输入登录密码" class="fl"><span class="fr">忘记密码？</span></p>
      </div><!--login_content ed-->
      <div class="login_btn">
        <a href="javascript:;">登录</a>
      </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        input_name:'',
        input_password:'',
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.logon_container{
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height: 100%;
    background-color: #fff;
    .login_mark{
      width: 100%;
      padding-top: 1.72rem;
      i{
        display: block;
        width:1.3rem;
        height: 1.33rem; 
        background:url(../../common/images/logo.png) no-repeat; 
        background-size: 100% 100%;
        margin:0 auto;
      }
      h1{
        width:1.9rem;
        height: .44rem;
        background:url(../../common/images/guide_title.png) no-repeat; 
        background-size: 100% 100%;
        text-align: center;
        margin:0.2rem auto;
      }
    }
    .login_content{
      width:86%;
      margin:0 auto;
      p{
        width:100%;
        height: 0.9rem;
        line-height: 0.9rem;
        border-bottom:1px solid #e8e8e8;
        input{
          display: block;
          width:70%;
          font-size: 0.28rem;
          height: 0.9rem;
          line-height: normal;
          color:#333;
        }
      }
      &:nth-child(2){
        span{
              display: block;
              width:30%;
              color:#e89747;
              font-size: 0.28rem;
              text-align: right;
        }
      }
    }
    .login_btn{
      width:86%;
      margin:0.5rem auto;
      a{
          display: block;
          width:100%;
          height: 0.8rem;
          line-height: 0.8rem;
          border:0.01rem solid #43bd54;
          text-align: center;
          color:#43bd54;
          font-size: 0.3rem;
          border-radius: 0.4rem;
          letter-spacing: 0.08rem;
      }
    }
}
::-webkit-input-placeholder { 
    color: #e8e8e8; 
 } 
</style>











